<template>
  <el-card class="box-card" style="height: 386px">
    <div class="acea-row row-between-wrapper mb20">
      <span class="header-title" v-text="title" />
      <span class="header-time">
        <el-dropdown>
          <span class="el-dropdown-link curP">
            <i class="el-icon-date mr5" />{{ timeTitle }} <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,i) in fromList.fromTxt" :key="i" @click.native="setTime(item.val, item.text)">{{ item.text }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <echarts-from :option-data="optionData" :styles="style"/>
  </el-card>
</template>

<script>
import echartsFrom from '@/components/echarts/index'
import { fromList } from '@/libs/select.js'
export default {
  name: 'Rate',
  components: { echartsFrom },
  props: {
    title: {
      type: String,
      default: ''
    },
    timeTitle: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      style: { height: '281px' },
      mlist: [],
      optionData: {},
      fromList: fromList,
    }
  },
  mounted() {
    this.getList('lately30')
  },
  methods: {

    setTime(val, text) {
        this.$emit('change-time',1,val,text)
    },

    getList(val) {
        this.mlist = this._props.list
        const legend = []
        const series = []
        const colors = ['#5AD8A6', '#5B8FF9', '#F6BD16', '#5D7092', '#C6C6C6']
        this.mlist.map((item, i) => {
          legend.push(item.category_name)
          series.push({ value: item.pay_price, name: item.category_name, itemStyle: { normal: { color: colors[i] }}})
        })
        this.optionData = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: legend
          },
          series: [
            {
              name: '占比',
              type: 'pie',
              radius: '65%',
              center: ['50%', '55%'],
              data: series,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
    }
  }
}
</script>

<style scoped lang="scss">
  .curP{
    cursor: pointer;
  }
  .header{
    &-title{
      font-size: 16px;
      color: #000000;
      font-weight:500;
    }
    &-time{
      font-size:12px;
      color: #000000;
      opacity: 0.45;
    }
  }
</style>
